<template>
  <s-layout
    title="搜索" :bgStyle="{ color: '#FFF' }"
  >
    <!-- 筛选 -->
    <su-sticky bgColor="#fff">
      <view class="ss-flex" style="padding: 0 30rpx;">
        <view class="souitem">
          <!-- <u-icon name="search" color="#878787" size="28"></u-icon> -->
          <image
            class="item-icon"
            src="/static/sousuo.png"
            mode=""
          ></image>
          <uni-easyinput
            class="ss-flex-1 ss-p-l-22"
            :inputBorder="false"
            :clearable="true"
            v-model="state.searchVal"
            placeholder="请输入关键词检索"
          ></uni-easyinput>
          <!-- <u-input v-model="state.searchVal" placeholder="请输入关键词检索" type="text" :border="false" /> -->
        </view>
        <view class="souibtn" v-if="state.searchVal" @click="getsuobtn(state.searchVal)">搜索</view>
      </view>
    </su-sticky>
    <view class="remen" v-if="state.historylist">
      <text class="rename">历史搜索</text>
      <view class="relist">
        <!-- <view class="reitem reactive">
          <image
            class="hot"
            src="/static/hot.png"
            mode=""
          ></image>
          琵琶腿
        </view> -->
        <view class="reitem" v-for="(item,index) in state.historylist" :key="index" @click.stop="getsou(item)">
          {{item.keyword}}

          <image
            class="chahao"
            src="/static/chahao.png"
            mode=""
            @click.stop="del(item)"
          ></image>
        </view>
      </view>
    </view>
    <!-- 弹窗 -->
    <su-popup
      :show="state.showFilter"
      type="top"
      round="10"
      :space="sys_navBar + 38"
      backgroundColor="#F6F6F6"
      :zIndex="10"
      @close="state.showFilter = false"
    >
      <view class="filter-list-box">
        <view
          class="filter-item"
          v-for="(item, index) in state.tabList[state.currentTab].list"
          :key="item.value"
          :class="[{ 'filter-item-active': index == state.curFilter }]"
          @tap="onFilterItem(index)"
        >
          {{ item.label }}
        </view>
      </view>
    </su-popup>

    <s-select-sku
      :goodsInfo="state.goodsInfo"
      :show="state.showSelectSku"
      @addCart="onAddCart"
      @buy="onBuy"
      @change="onSkuChange"
      @close="state.showSelectSku = false"
    />
    <!-- <view v-if="state.iconStatus && state.pagination.total > 0" class="goods-list ss-m-t-20">
      <view
        class="ss-p-l-20 ss-p-r-20 ss-m-b-20"
        v-for="item in state.pagination.data"
        :key="item.id"
      >
        <s-goods-column
          class=""
          size="lg"
          :data="item"
          :topRadius="10"
          :bottomRadius="10"
          @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
        ></s-goods-column>
      </view>
    </view> -->
    <view class="zhekou" v-if="state.hotlist">
      <view class="zhe">
         <image
            class="hot"
            src="/static/hot.png"
            mode=""
          ></image>
        <text class="zhename">超值折扣</text>
      </view>
      <view class="newlist">
        <view class="newitem" v-for="(item,index) in state.hotlist" :key="index">
          <image
            class="tuimg"
            :src="sheep.$url.cdn(item.image)"
            mode=""
          ></image>
          <view class="navitem">
            <text class="biaoname">{{item.title}}</text>
            <text class="pjia">¥{{ item.price[0] }}</text>
          </view>
          <view class="goujia" @click="getadd(item,index)">
            <image
              class="jiaicon"
              src="/static/jia.png"
              mode=""
            ></image>
            <view class="goushu" v-if="item.cart_nums!=0&&item.cart_nums">
              {{ item.cart_nums }} 
            </view>
          </view>
        </view>
      </view>
      <!-- <view
        v-if="!state.iconStatus && state.pagination.total > 0"
        class="ss-flex ss-flex-wrap ss-m-t-20 ss-col-top"
      >
        <view class="goods-list-box">
          <view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
            <s-goods-column
              class="goods-md-box"
              size="md"
              :data="item"
              :topRadius="10"
              :bottomRadius="10"
              @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
              @getHeight="mountMasonry($event, 'left')"
            >
              <template v-slot:cart>
                <button class="ss-reset-button cart-btn">
                立即购买
                </button>
              </template>
            </s-goods-column>
          </view>
        </view>
        <view class="goods-list-box">
          <view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
            <s-goods-column
              class="goods-md-box"
              size="md"
              :topRadius="10"
              :bottomRadius="10"
              :data="item"
              @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
              @getHeight="mountMasonry($event, 'right')"
            >
              <template v-slot:cart>
                <button class="ss-reset-button cart-btn">
                立即购买
                </button>
              </template>
            </s-goods-column>
          </view>
        </view>
      </view> -->
     
      <s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品">
      </s-empty>
    </view>
    <!-- <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    /> -->
    

   
  </s-layout>
</template>

<script setup>
  import { reactive } from 'vue';
  import { onLoad, onReachBottom,onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import _ from 'lodash';

  const sys_navBar = sheep.$platform.navbar;
  const emits = defineEmits(['close', 'change']);

  const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1
  };

  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
    currentSort: 'weigh',
    currentOrder: 'desc',
    currentTab: 0,
    filterParams: {},
    curFilter: 0,
    showFilter: false,
    iconStatus: false,
    categoryId: 0,
    tabList: [
      {
        name: '综合推荐',
        value: 'weigh',
        list: [
          {
            label: '综合推荐',
            sort: 'weigh',
            order: 'desc',
          },
          {
            label: '价格升序',
            sort: 'price',
            order: 'asc',
          },
          {
            label: '价格降序',
            sort: 'price',
            order: 'desc',
          },
        ],
      },
      {
        name: '销量',
        value: 'total_sales',
      },
      {
        name: '新品优先',
        value: 'createtime',
      },
    ],
    loadStatus: '',
    keyword: '',
    leftGoodsList: [],
    rightGoodsList: [],
    searchVal:'',
    // goodsInfo: {},
    goodsInfo: {"id":17,"site":0,"type":"normal","title":"漫步者(EDIFIER) HECATE G2专业版 USB7.1声道 游戏耳机电竞耳麦头戴式电脑耳机麦克风吃鸡耳机带线控 黑色","subtitle":"麦克风吃鸡耳机带线控","category_ids":"8,62,64,86,91,92,35","image":"http://file.sheepjs.com/www/default/8.png","image_wh":null,"images":["http://file.sheepjs.com/www/default/9.png","http://file.sheepjs.com/www/default/10.png","http://file.sheepjs.com/www/default/11.png"],"params":[{"title":"频响范围","content":"20Hz-20KHz"},{"title":"线型","content":"单边导线"},{"title":"振膜尺寸","content":"50mm"}],"original_price":"389.00","price":["299.00"],"is_sku":1,"limit_type":"none","limit_num":0,"likes":0,"views":157,"sales":7,"sales_show_type":"exact","stock_show_type":"exact","show_sales":0,"service_ids":[1,2,3,4],"dispatch_type":"express","dispatch_id":1,"is_offline":0,"status":"up","weigh":0,"createtime":"2023-03-09 17:10:33","updatetime":"2023-03-09 17:10:33","deletetime":null,"stock":65,"activity_type":null,"service":[{"id":1,"name":"正品保障","image":"/assets/addons/shopro/img/test/real.png","description":"正品保障，假一赔十","createtime":"2022-11-21 13:31:52","updatetime":"2022-12-03 15:13:04"},{"id":2,"name":"7天无理由退换","image":"/assets/addons/shopro/img/test/seven.png","description":"满足相应条件（吊牌缺失,洗涤后不支持）时，消费者可 申请“7天无理由退换货”","createtime":"2022-11-21 13:31:52","updatetime":"2022-12-03 15:13:11"},{"id":3,"name":"退货运费险","image":"/assets/addons/shopro/img/test/dispatch_fee.png","description":"卖家投保退货运费险，负担一定金额退货运费","createtime":"2022-11-21 13:31:52","updatetime":"2022-11-21 13:31:52"},{"id":4,"name":"极速退款","image":"/assets/addons/shopro/img/test/refund.png","description":"卖家投保退货运费险，负担一定金额退货运费","createtime":"2022-11-21 13:31:52","updatetime":"2022-11-21 13:31:52"}],"skus":[{"id":41,"name":"颜色","parent_id":0,"goods_id":17,"weigh":0,"children":[{"id":42,"name":"白色","parent_id":41,"goods_id":17,"weigh":0},{"id":43,"name":"黑色","parent_id":41,"goods_id":17,"weigh":0},{"id":44,"name":"黄色","parent_id":41,"goods_id":17,"weigh":0}]}],"activities":[],"promos":[],"favorite":null,"status_text":"上架中","type_text":"实体商品","dispatch_type_text":"快递物流","sku_prices":[{"id":45,"goods_sku_ids":"42","goods_sku_text":["白色"],"goods_id":17,"image":"","stock":19,"stock_warning":null,"sales":1,"sn":"","weight":"0.00","cost_price":"120.00","original_price":"389.00","p1_price":"0.00","p1_nums":0,"p2_price":"0.00","p2_nums":0,"p3_price":"0.00","p3_nums":0,"p4_price":"0.00","p4_nums":0,"p5_price":"0.00","p5_nums":0,"price":"299.00","status":"up","weigh":0,"createtime":"2022-10-13 15:59:25","updatetime":"2022-10-13 15:59:25","status_text":"上架"},{"id":46,"goods_sku_ids":"43","goods_sku_text":["黑色"],"goods_id":17,"image":"","stock":27,"stock_warning":null,"sales":5,"sn":"","weight":"0.00","cost_price":"120.00","original_price":"389.00","p1_price":"0.00","p1_nums":0,"p2_price":"0.00","p2_nums":0,"p3_price":"0.00","p3_nums":0,"p4_price":"0.00","p4_nums":0,"p5_price":"0.00","p5_nums":0,"price":"299.00","status":"up","weigh":0,"createtime":"2022-10-13 15:59:25","updatetime":"2022-10-13 15:59:25","status_text":"上架"},{"id":47,"goods_sku_ids":"44","goods_sku_text":["黄色"],"goods_id":17,"image":"","stock":19,"stock_warning":null,"sales":1,"sn":"","weight":"0.00","cost_price":"120.00","original_price":"389.00","p1_price":"0.00","p1_nums":0,"p2_price":"0.00","p2_nums":0,"p3_price":"0.00","p3_nums":0,"p4_price":"0.00","p4_nums":0,"p5_price":"0.00","p5_nums":0,"price":"299.00","status":"up","weigh":0,"createtime":"2022-10-13 15:59:25","updatetime":"2022-10-13 15:59:25","status_text":"上架"}],"content":"","prices":[{"name":"白色","prices":[{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"}]},{"name":"黑色","prices":[{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"}]},{"name":"黄色","prices":[{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"}]}]},
    showSelectSku: false,
    selectedSkuPrice: {},
    historylist:[],
    iszhe:false,
    hotlist:[]
  });

  // 加载瀑布流
  let count = 0;
  let leftHeight = 0;
  let rightHeight = 0;

  function mountMasonry(height = 0, where = 'left') {
    if (!state.pagination.data[count]) return;

    if (where === 'left') {
      leftHeight += height;
    } else {
      rightHeight += height;
    }
    if (leftHeight <= rightHeight) {
      state.leftGoodsList.push(state.pagination.data[count]);
    } else {
      state.rightGoodsList.push(state.pagination.data[count]);
    }
    count++;
  }

  function emptyList() {
    state.pagination = pagination;
    state.leftGoodsList = [];
    state.rightGoodsList = [];
    count = 0;
    leftHeight = 0;
    rightHeight = 0;
  }
  //搜索
  function onSearch(e) {
    state.keyword = e;
    emptyList();
    getList(state.currentSort, state.currentOrder, state.categoryId, e);
  }

  // 点击
  function onTabsChange(e) {
    if (state.tabList[e.index].list) {
      state.currentTab = e.index;
      state.showFilter = !state.showFilter;
      return;
    } else {
      state.showFilter = false;
    }
    if (e.index === state.currentTab) {
      return;
    } else {
      state.currentTab = e.index;
    }
    emptyList();

    getList(e.value, state.currentOrder, state.categoryId, state.keyword);
  }

  // 点击筛选项
  const onFilterItem = (val) => {
    if (
      state.currentSort === state.tabList[0].list[val].sort &&
      state.currentOrder === state.tabList[0].list[val].order
    ) {
      state.showFilter = false;
      return;
    }
    state.curFilter = val;
    state.tabList[0].name = state.tabList[0].list[val].label;
    state.currentSort = state.tabList[0].list[val].sort;
    state.currentOrder = state.tabList[0].list[val].order;
    emptyList();
    getList(state.currentSort, state.currentOrder, state.categoryId, state.keyword);
    state.showFilter = false;
  };

  async function getList() {
    // state.loadStatus = 'loading';
    // const res = await sheep.$api.goods.list({
    //   sort: Sort,
    //   order: Order,
    //   category_id: !keyword ? categoryId : '',
    //   list_rows,
    //   keyword: keyword,
    //   page,
    // });
    // if (res.code === 1) {
    //   let couponList = _.concat(state.pagination.data, res.data.data);
    //   state.pagination = {
    //     ...res.data,
    //     data: couponList,
    //   };
    //   mountMasonry();
    //   if (state.pagination.current_page < state.pagination.last_page) {
    //     state.loadStatus = 'more';
    //   } else {
    //     state.loadStatus = 'noMore';
    //   }
    // }
    const res = await sheep.$api.goods.getHotGoods({
      
    });
    // console.log(res)
    state.hotlist = res.data
  }
  async function gethistory(){
    const res = await sheep.$api.goods.getKeywods({
      
    });
    // console.log(res)
    state.historylist = res.data
  }
  function getsou(item){
   
    getsoulist(item.keyword)
  }
  
  async function del(item){
    const res = await sheep.$api.goods.delKeywordsnew({
      id:item.id
    });
    console.log(res)
    gethistory()
  }
  // 加载更多
  // function loadmore() {
  //   if (state.loadStatus !== 'noMore') {
  //     getList(
  //       state.currentSort,
  //       state.currentOrder,
  //       state.categoryId,
  //       state.keyword,
  //       state.pagination.current_page + 1,
  //     );
  //   }
  // }
  // 添加购物车
  function onAddCart(e) {
    sheep.$store('cart').add(e);
    // onFavoritetwo();
    state.showSelectSku = false
    getList();
  }
  
  function getsuobtn(searchVal){
    getsoulist(searchVal)
    state.searchVal = ''
  }
  function getsoulist(keyword){
    if(keyword == ''){
      sheep.$helper.toast('搜索内容不能为空');
      return;
    }
    sheep.$router.go('/pages/goods/list', { keyword: keyword })
  }
   // 立即购买
   function onBuy(e) {
	  //  console.log(e.goods_num)
    //  console.log("+++++")
    //  return;
    sheep.$router.go('/pages/order/confirm', {
      data: JSON.stringify({
        order_type: 'goods',
        goods_list: [
          {
            goods_id: e.goods_id,
            goods_num: e.goods_num,
            goods_sku_price_id: e.id,
          },
        ],
      }),
    });
  }
  // 规格变更
  function onSkuChange(e) {
    state.selectedSkuPrice = e;
  }
  function getadd(item,index){
    console.log("+++")
    state.goodsInfo = item
    state.showSelectSku = true
    console.log(state.showSelectSku)
  }

  onLoad((options) => {
   
    // state.categoryId = options.categoryId;
    // state.keyword = options.keyword;
    getList();
  });
  onShow(() => {
    gethistory();//历史
  });
  // 上拉加载更多
  // onReachBottom(() => {
  //   loadmore();
  // });
</script>

<style lang="scss" scoped>
  .goods-list-box {
    width: 50%;
    box-sizing: border-box;
    .left-list {
      margin-right: 10rpx;
      margin-bottom: 20rpx;
    }
    .right-list {
      margin-left: 10rpx;
      margin-bottom: 20rpx;
    }
  }
  .goods-box {
    &:nth-last-of-type(1) {
      margin-bottom: 0 !important;
    }
    &:nth-child(2n) {
      margin-right: 0;
    }
  }
  .list-icon {
    width: 80rpx;
    .sicon-goods-card {
      font-size: 40rpx;
    }
    .sicon-goods-list {
      font-size: 40rpx;
    }
  }
  .goods-card {
    margin-left: 20rpx;
  }
  .list-filter-tabs {
    background-color: #fff;
  }
  .filter-list-box {
    padding: 28rpx 52rpx;
    .filter-item {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: normal;
      margin-bottom: 24rpx;
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
    .filter-item-active {
      color: var(--ui-BG-Main);
    }
  }
  .tab-item {
    height: 50px;
    position: relative;
    z-index: 11;

    .tab-title {
      font-size: 30rpx;
    }

    .cur-tab-title {
      font-weight: $font-weight-bold;
    }

    .tab-line {
      width: 60rpx;
      height: 6rpx;
      border-radius: 6rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10rpx;
      background-color: var(--ui-BG-Main);
      z-index: 12;
    }
  }
  .cart-btn {
      position: absolute;
      bottom: 18rpx;
      right: 20rpx;
      z-index: 11;
      height: 50rpx;
      line-height: 50rpx;
      padding: 0 20rpx;
      border-radius: 25rpx;
      font-size: 24rpx;
      color: #fff;
      background: linear-gradient(to right, #FF3000, #EECC89);
    }
    .souibtn{
      margin-left: 30rpx;
      padding: 18rpx 34rpx;
      border-radius: 50rpx;
      background-color: #ff6d00;
      color: #fff;
      font-size: 28rpx;
      font-weight: 400;
    }

    .souitem{
      background-color: rgba(236,236,236,1);
      padding: 8rpx 30rpx;
      border-radius: 50rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 20rpx auto;
      // width: 85%;
      flex: 1;
      .item-icon{
        width: 32rpx;
        height: 32rpx;
        margin-right: 20rpx;
      }
      // background-color: #878787;
      
    }
    .remen{
      display: flex;
      flex-direction: column;
      padding: 30rpx;
      .rename{
        color: #333;
        font-size: 34rpx;
        font-weight: 400;
        display: block;
        margin-bottom: 30rpx;
      }
      .relist{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .reitem{
          padding: 14rpx 30rpx;
          background-color: rgba(236,236,236,1);
          color: #333;
          font-size: 28rpx;
          font-weight: 400;
          margin: 0 30rpx 20rpx 0;
          border-radius: 50rpx;
          position: relative;
          .hot{
            width: 28rpx;
            height: 28rpx;
            margin-right: 0rpx;
          }
        }
        .reactive{
          background-color: rgba(246,228,229,1);
        }
      }
    }
    .zhekou{
      background-color: rgba(250,217,190,1);
      border-radius: 20rpx;
      padding: 20rpx;
      margin: 30rpx;
      .zhe{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 30rpx;
        .zhename{
          color: #e5102e;
          font-size: 32rpx;
          font-weight: 500;
          display: block;
          
        }
        .hot{
          width: 32rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }
      }
      .newlist{
        display: flex;
        flex-direction: column;
        .newitem{
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-bottom: 30rpx;
          .tuimg{
            width: 110rpx;
            height: 110rpx;
            border-radius: 10rpx;
            margin-right: 25rpx;
          }
          .navitem{
            width:70%;
            display: flex;
            flex-direction: column;
            .biaoname{
              max-width: 100%;
              display: inline-block;
              color: #333;
              font-size: 28rpx;
              font-weight: 500;
              overflow: hidden;  //超出隐藏
              white-space: nowrap; //不折行
              text-overflow: ellipsis; //溢出显示省略号
            }
            .pjia{
              color: rgba(247,12,36,1);
              font-size: 32rpx;
              font-weight: 500;
              margin-top: 30rpx;
              display: block;
            }
          }
          .goujia{
            margin-left: auto;
            position: relative;
            width: 50rpx;
            height: 50rpx;

            .jiaicon{
              position: absolute;
              width: 100%;
              height: 100%;
            }
            .goushu{
              position: absolute;
              padding: 4rpx;
              background-color: red;
              color: #fff;
              font-size: 20rpx;
              font-weight: 400;
              border-radius: 50%;
              right: -8rpx;
              min-width: 27rpx;
              top: -5px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
        .newitem:last-child{
          margin-bottom: 0;
        }
      }
    }


.chahao{
  width: 24rpx;
  height: 24rpx;
  position: absolute;
  right: 0px;
  top: -2px;
}
</style>
